<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>检测报告</title>
    <script type="text/javascript">
        var metaEl, wrap, w = screen.width,
            dp = 1,
            scale = w / 320;

        window.navigator.appVersion.match(/android/gi) && (w = window.outerWidth, dp = window.devicePixelRatio, scale =
                w / 320 / devicePixelRatio), screen.width > 320 && 1 > scale && (scale = screen.width / 320), metaEl =
            document.createElement("meta"), metaEl.setAttribute("name", "viewport"), metaEl.setAttribute("content",
                "width=320, initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale +
                ", user-scalable=no"), document.documentElement.firstElementChild ? document.documentElement.firstElementChild
            .appendChild(metaEl) : (wrap = document.createElement("div"), wrap.appendChild(metaEl), documen.write(wrap.innerHTML));
    </script>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="swiper/idangerous.swiper.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>


    <div class="main">
        <div class="bg-box">
            <div class="bg bg-0">
            </div>
            <div class="bg bg-1">
            </div>
            <div class="bg bg-gender bg-female">
            </div>
            <div class="bg bg-3">
            </div>
        </div>
        <div class="banner">
            <div class="banner-circle">
                <span>90</span>分
            </div>
            <div class="banner-text">
                <p class="name">
                    昵称:<span>茱萸湾</span>
                </p>
                <p class="tips">
                    <i class="gender male"></i>
                    <i class="skin">干性皮肤</i>
                </p>
            </div>
        </div>

        <div class="report-item report-1">
            粉刺轻微
        </div>
        <div class="report-item report-2">
            毛孔细小
        </div>
        <div class="report-item report-3">
            色素重度
        </div>
        <div class="report-item report-4">
            细纹
        </div>
        <div class="report-item report-5">
            敏感度中
        </div>

        <div class="report-tabs">
            <div class="tabs">
                <a href="#" class="active">干纹</a>
                <a href="#">色素</a>
                <a href="#">敏感度</a>
                <a href="#">毛孔</a>
                <a href="#">粉刺</a>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <h2>诊断</h2>
                            <div class="reportItem fist-color diagnose1">

                            </div>
                            <h2>分析</h2>
                            <div class="reportItem analyze1">

                            </div>
                            <h2>建议</h2>
                            <div class="reportItem  fontColorff789b advice1">

                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <h2>诊断</h2>
                            <div class="reportItem fist-color diagnose2">

                            </div>
                            <h2>分析</h2>
                            <div class="reportItem analyze2">

                            </div>
                            <h2>建议</h2>
                            <div class="reportItem fontColorff789b advice2">

                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <h2>诊断</h2>
                            <div class="reportItem fist-color diagnose3">

                            </div>
                            <h2>分析</h2>
                            <div class="reportItem analyze3">

                            </div>
                            <h2>建议</h2>
                            <div class="reportItem  fontColorff789b advice3">

                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <h2>诊断</h2>
                            <div class="reportItem fist-color diagnose4">

                            </div>
                            <h2>分析</h2>
                            <div class="reportItem analyze4">

                            </div>
                            <h2>建议</h2>
                            <div class="reportItem  fontColorff789b advice4">

                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <h2>诊断</h2>
                            <div class="reportItem fist-color diagnose5">

                            </div>
                            <h2>分析</h2>
                            <div class="reportItem analyze5">

                            </div>
                            <h2>建议</h2>
                            <div class="reportItem  fontColorff789b advice5">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="show-report-img" style="display:none;">
            <div class="bg"></div>
            <div class="report-box">
                <div class="report-img">

                </div>
                <div class="report-img-text">
                    <div class="report-border">
                        <div class="border-circle"></div>
                        <div class="border"></div>

                    </div>
                    <div class="report-img-text-content"></div>
                    <div class="report-border">
                        <div class="border"></div>
                        <div class="border-circle"></div>


                    </div>
                </div>

            </div>
        </div>
    </div>


    <script src="swiper/jquery-1.10.1.min.js"></script>
    <script src="swiper/idangerous.swiper.min.js"></script>
    <!-- <script src="js/vconsole.min.js"></script>
    <script>
        // 初始化
        var vConsole = new VConsole();
        console.log('VConsole is cool');
    </script> -->



    <script>
        $(function () {
            var tabsSwiper = new Swiper('.swiper-container', {
                speed: 500,
                onSlideChangeStart: function () {
                    $(".tabs .active").removeClass('active')
                    $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')
                }
            })
            $(".tabs a").on('touchstart mousedown', function (e) {
                e.preventDefault()
                $(".tabs .active").removeClass('active')
                $(this).addClass('active')
                tabsSwiper.swipeTo($(this).index())
            })
            $(".tabs a").click(function (e) {
                e.preventDefault()
            })
        })
    </script>

    <script>
        jQuery.noConflict()
    </script>

    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/ajax.js"></script>
    <script>
        Zepto(function ($) {
            $(document).ready(function () {
                var userName = $('.name span');
                var userNum = $('.banner-circle span');
                var gender = $('.gender');
                var skin = $('.skin');
                var report1 = $('.report-1')
                var report2 = $('.report-2')
                var report3 = $('.report-3')
                var report4 = $('.report-4')
                var report5 = $('.report-5')
                var diagnose1 = $('.diagnose1')
                var analyze1 = $('.analyze1')
                var advice1 = $('.advice1')
                var diagnose2 = $('.diagnose2')
                var analyze2 = $('.analyze2')
                var advice2 = $('.advice2')
                var diagnose3 = $('.diagnose3')
                var analyze3 = $('.analyze3')
                var advice3 = $('.advice3')
                var diagnose4 = $('.diagnose4')
                var analyze4 = $('.analyze4')
                var advice4 = $('.advice4')
                var diagnose5 = $('.diagnose5')
                var analyze5 = $('.analyze5')
                var advice5 = $('.advice5')
                var reportItem = $('.reportItem')
                var reportImg = $('.report-img')
                var genderBg = $('.bg-gender')
                var reportImgText = $('.report-img-text-content')
                var reportData = []
                var reg = new RegExp("\r\n", "g");


                var http = window.location.href;

                function getUrlParam(url, name) {
                    let pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
                    let matcher = pattern.exec(url);
                    let items = null;
                    if (matcher != null) {
                        try {
                            items = decodeURIComponent(decodeURIComponent(matcher[1]));
                        } catch (e) {
                            try {
                                items = decodeURIComponent(matcher[1]);
                            } catch (e) {
                                items = matcher[1];
                            }
                        }
                    }
                    return items;
                }


                var data = {};

                data.id = Number(getUrlParam(http, 'id'))
                data.Token = Number(getUrlParam(http, 'Token'))

                // var url = '/skin/getReportInfo/noEncrypt/' +
                //     data.id;
                var url = 'https://easy-mock.com/mock/5c232bd0ea11802390b3a3a9/lol/getReportInfo';

                $.ajax({
                    type: "GET",
                    url: url,
                    data: data,
                    success: (res) => {
                        // res = JSON.parse(res);
                        reportData = res.data
                        userName.html(res.data.nickName)
                        userNum.html(res.data.score)
                        skin.html(res.data.skinType)
                        report1.html(res.data.resImg5Desc)
                        report2.html(res.data.resImg4Desc)
                        report3.html(res.data.resImg2Desc)
                        report4.html(res.data.resImg1Desc)
                        report5.html(res.data.resImg3Desc)
                        diagnose1.html(res.data.resImg1List[0].replace(reg, "<br/>"))
                        analyze1.html(res.data.resImg1List[1].replace(reg, "<br/>"))
                        advice1.html(res.data.resImg1List[2].replace(reg, "<br/>"))
                        diagnose2.html(res.data.resImg2List[0].replace(reg, "<br/>"))
                        analyze2.html(res.data.resImg2List[1].replace(reg, "<br/>"))
                        advice2.html(res.data.resImg2List[2].replace(reg, "<br/>"))
                        diagnose3.html(res.data.resImg3List[0].replace(reg, "<br/>"))
                        analyze3.html(res.data.resImg3List[1].replace(reg, "<br/>"))
                        advice3.html(res.data.resImg3List[2].replace(reg, "<br/>"))
                        diagnose4.html(res.data.resImg4List[0].replace(reg, "<br/>"))
                        analyze4.html(res.data.resImg4List[1].replace(reg, "<br/>"))
                        advice4.html(res.data.resImg4List[2].replace(reg, "<br/>"))
                        diagnose5.html(res.data.resImg5List[0].replace(reg, "<br/>"))
                        analyze5.html(res.data.resImg5List[1].replace(reg, "<br/>"))
                        advice5.html(res.data.resImg5List[2].replace(reg, "<br/>"))
                        if (res.data.sex == '男') {
                            gender.addClass('male')
                            genderBg.removeClass('bg-female')
                            genderBg.addClass('bg-male')
                        } else {
                            gender.addClass('female')
                            genderBg.removeClass('bg-male')
                            genderBg.addClass('bg-female')
                        }
                    }
                })

                report1.bind('tap', function () {
                    $('.show-report-img').show();
                    reportImg.html('<img src="' + reportData.resImg5 + '" alt="">')
                    reportImgText.html(reportData.resImg5Desc)
                })
                report2.click(function () {
                    $('.show-report-img').show();
                    reportImg.html('<img src="' + reportData.resImg4 + '" alt="">')
                    reportImgText.html(reportData.resImg4Desc)
                })
                report3.click(function () {
                    $('.show-report-img').show();
                    reportImg.html('<img src="' + reportData.resImg2 + '" alt="">')
                    reportImgText.html(reportData.resImg2Desc)
                })
                report4.click(function () {
                    $('.show-report-img').show();
                    reportImg.html('<img src="' + reportData.resImg1 + '" alt="">')
                    reportImgText.html(reportData.resImg1Desc)
                })
                report5.click(function () {
                    $('.show-report-img').show();
                    reportImg.html('<img src="' + reportData.resImg3 + '" alt="">')
                    reportImgText.html(reportData.resImg3Desc)
                })

                $('.bg').bind('tap', function () {
                    $('.show-report-img').hide();
                })

            })
        });
    </script>
</body>

</html>